<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationBarTitleText: '经销商注册',
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <view class="entire" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
    <view v-if="pageData.userAgreementShow == false && pageData.userDeptShow == false">
      <view style="position: absolute; top: 150rpx; padding: 30rpx" @click="back">
        <image
          src="@/static/images/icons/icon_return.png"
          style="width: 23rpx; height: 42rpx"
        ></image>
      </view>
      <image class="bg" :src="loginBg"></image>
      <view class="title1">格知汇</view>
      <view class="title2">Grundfos Academy China Club</view>
      <view class="input-area">
        <view class="input-entire">
          <view class="left">
            <view class="must">*</view>
            <image class="icon" :src="iconPhone" mode="widthFix"></image>
            <input
              class="text"
              type="number"
              v-model="pageData.form.phone"
              placeholder="请输入手机号"
              placeholder-class="placeholder-class"
            />
          </view>
        </view>
        <image style="width: 600rpx; margin-left: 40rpx" mode="widthFix" :src="iconDivider"></image>

        <view class="input-entire">
          <view class="left">
            <view class="must">*</view>
            <image class="icon" :src="iconPassword" mode="widthFix"></image>
            <input
              class="text"
              v-model="pageData.form.password"
              placeholder="密码至少8位且包含数字、字母"
              :password="pageData.hidePassword1"
              placeholder-class="placeholder-class"
            />
          </view>
          <image
            v-if="pageData.hidePassword1"
            style="width: 40rpx; height: 20rpx"
            :src="iconEyeClose"
            @click="pageData.hidePassword1 = false"
          ></image>
          <image
            v-if="!pageData.hidePassword1"
            style="width: 40rpx; height: 22rpx"
            :src="iconEye"
            @click="pageData.hidePassword1 = true"
          ></image>
        </view>
        <image style="width: 600rpx; margin-left: 40rpx" mode="widthFix" :src="iconDivider"></image>

        <view class="input-entire">
          <view class="left">
            <view class="must">*</view>
            <image class="icon" :src="iconPassword" mode="widthFix"></image>
            <input
              class="text"
              v-model="pageData.form.password2"
              placeholder="密码至少8位且包含数字、字母"
              :password="pageData.hidePassword2"
              placeholder-class="placeholder-class"
            />
          </view>
          <image
            v-if="pageData.hidePassword2"
            style="width: 40rpx; height: 20rpx"
            :src="iconEyeClose"
            @click="pageData.hidePassword2 = false"
          ></image>
          <image
            v-if="!pageData.hidePassword2"
            style="width: 40rpx; height: 22rpx"
            :src="iconEye"
            @click="pageData.hidePassword2 = true"
          ></image>
        </view>
        <image style="width: 600rpx; margin-left: 40rpx" mode="widthFix" :src="iconDivider"></image>

        <view class="input-entire">
          <view class="left">
            <view class="must">*</view>
            <image class="icon" :src="iconCode" mode="widthFix"></image>
            <input
              class="text"
              v-model="pageData.form.name"
              placeholder="请输入姓名"
              placeholder-class="placeholder-class"
            />
          </view>
        </view>
        <image style="width: 600rpx; margin-left: 40rpx" mode="widthFix" :src="iconDivider"></image>

        <view class="input-entire">
          <view class="left">
            <view class="must">*</view>
            <image class="icon" :src="iconCode" mode="widthFix"></image>
            <input
              class="text"
              v-model="pageData.form.email"
              placeholder="请输入邮箱"
              placeholder-class="placeholder-class"
            />
          </view>
        </view>
        <image style="width: 600rpx; margin-left: 40rpx" mode="widthFix" :src="iconDivider"></image>

        <view class="input-entire">
          <view class="left">
            <view class="must">*</view>
            <image class="icon" :src="iconCode" mode="widthFix"></image>
            <wd-picker :columns="['男', '女']" v-model="pageData.form.sex" use-default-slot>
              <view class="text">{{ pageData.form.sex || '请选择性别' }}</view>
            </wd-picker>
          </view>
          <image style="width: 25rpx" :src="iconNext" mode="widthFix"></image>
        </view>
        <image style="width: 600rpx; margin-left: 40rpx" mode="widthFix" :src="iconDivider"></image>

        <view class="input-entire">
          <view class="left">
            <view class="must">*</view>
            <image class="icon" :src="iconCode" mode="widthFix"></image>
            <wd-picker
              :columns="columns"
              v-model="value"
              :column-change="onChangeDistrict"
              @confirm="onConfirmDistrict"
              use-default-slot
              title="请选择企业所在省市"
            >
              <view class="text">
                {{
                  pageData.form.province
                    ? pageData.form.province + '-' + pageData.form.city
                    : '请选择省市'
                }}
              </view>
            </wd-picker>
          </view>
          <image style="width: 25rpx" :src="iconNext" mode="widthFix"></image>
        </view>
        <image style="width: 600rpx; margin-left: 40rpx" mode="widthFix" :src="iconDivider"></image>

        <view class="input-entire">
          <view class="left">
            <view class="must"></view>
            <image class="icon" :src="iconCode" mode="widthFix"></image>
            <wd-picker
              :columns="pageData.companyNames"
              v-model="pageData.form.enterPrice"
              use-default-slot
              title="选择企业"
              :disabled="pageData.form.city == null"
              @confirm="onCompanySelect"
            >
              <view class="text" :style="{ color: pageData.form.province ? 'white' : '#c5c5c5' }">
                {{ pageData.form.enterPrice || '请选择所属企业' }}
              </view>
            </wd-picker>
          </view>
          <image style="width: 25rpx" :src="iconNext" mode="widthFix"></image>
        </view>
        <image style="width: 600rpx; margin-left: 40rpx" mode="widthFix" :src="iconDivider"></image>

        <view class="input-entire">
          <view class="left">
            <view class="must"></view>
            <image class="icon" :src="iconCode" mode="widthFix"></image>
            <view
              class="text"
              :style="{ color: pageData.form.companyId ? 'white' : '#c5c5c5' }"
              @click="pageData.userDeptShow = true"
            >
              {{ pageData.form.yewu || '请选择业务' }}
            </view>
          </view>
          <image style="width: 25rpx" :src="iconNext" mode="widthFix"></image>
        </view>
        <image style="width: 600rpx; margin-left: 40rpx" mode="widthFix" :src="iconDivider"></image>

        <view class="input-entire">
          <view class="left">
            <view class="must">*</view>
            <image class="icon" :src="iconCode" mode="widthFix"></image>
            <wd-picker
              :columns="pageData.postNames"
              v-model="pageData.form.gangwei"
              use-default-slot
            >
              <view class="text">{{ pageData.form.gangwei || '请选择岗位' }}</view>
            </wd-picker>
          </view>
          <image style="width: 25rpx" :src="iconNext" mode="widthFix"></image>
        </view>
        <image style="width: 600rpx; margin-left: 40rpx" mode="widthFix" :src="iconDivider"></image>

        <view class="input-entire">
          <view class="left">
            <view class="must">*</view>
            <wd-checkbox
              v-model="pageData.userAgreement"
              shape="square"
              checked-color="#2668BBFF"
              size="large"
            ></wd-checkbox>
            <text class="ml-10rpx">我已阅读并同意</text>
            <text class="a" @click="pageData.userAgreementShow = true">《用户协议》</text>
          </view>
        </view>

        <view class="btn-register" @click="handleRegister">注册</view>
        <view style="height: 50rpx"></view>
      </view>
      <wd-popup
        v-model="pageData.popShow"
        position="bottom"
        custom-style="border-radius:32rpx; height:500rpx "
      >
        <wd-search placeholder="公司名称" cancel-txt="搜索" />
        <image style="width: 100%; margin-top: 40rpx" :src="searchInfo" mode="widthFix"></image>
      </wd-popup>
    </view>
    <view v-if="pageData.userAgreementShow">
      <image class="bg" :src="loginBg"></image>
      <view class="title1">格知汇</view>
      <view class="title2">Grundfos Academy China Club</view>
      <view class="agreement-card">
        <view class="agreement-title">用户数据收集和使用协议</view>
        <scroll-view scroll-y="true" class="agreement-content" enable-flex="true">
          <!--隐私政策-->
          <rich-text :nodes="privacy"></rich-text>
        </scroll-view>
        <view @click="showConfirmDialog" class="agreement-button">同意</view>
      </view>
    </view>
    <view v-if="pageData.userDeptShow">
      <image class="bg" :src="loginBg"></image>
      <view class="title1">格知汇</view>
      <view class="title2">Grundfos Academy China Club</view>
      <view class="input-area" style="padding-top: 50rpx">
        <wd-config-provider :theme-vars="themeVars">
          <wd-checkbox-group v-model="pageData.chooseDeptList" custom-class="test-group">
            <view
              v-for="(item, index) in pageData.businessNames"
              style="display: flex; margin-left: 40rpx; margin-top: 10rpx; color: white"
            >
              <wd-checkbox
                :modelValue="pageData.businessNames[index]"
                shape="square"
                checked-color="#2668BBFF"
                size="large"
              ></wd-checkbox>
              <text>{{ item }}</text>
            </view>
          </wd-checkbox-group>
        </wd-config-provider>
        <view
          style="
            display: flex;
            justify-content: space-between;
            width: 75%;
            margin-left: 12.5%;
            margin-top: 60rpx;
          "
        >
          <view class="agreement-button" @click="handleDeptSelect">确定</view>
          <view class="agreement-button" @click="pageData.userDeptShow = false">返回</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { loginBg } from '@/static/imgMap'
import {
  iconCode,
  iconDivider,
  iconEye,
  iconEyeClose,
  iconNext,
  iconPassword,
  iconPhone,
  iconSearchGrey,
  searchInfo,
} from '@/static/iconsMap'
import {
  getDeptList,
  getPostList,
  getRegion,
  getSupplierCompanyList,
  register,
} from '@/service/user/userRegister'
import { privacy } from '@/pages/login/privacy'
import type { ConfigProviderThemeVars } from 'wot-design-uni'
const themeVars: ConfigProviderThemeVars = {
  checkboxBg: '#ffffff00',
}
const safeAreaInsets = uni.getSystemInfoSync().safeAreaInsets
const pageData = reactive({
  form: {
    province: null,
    provinceCode: null, // 添加省份代码
    city: null, // 添加城市字段
    cityCode: null, // 添加城市代码
    enterPrice: null,
    companyId: null,
    phone: null,
    sex: '',
    yewu: '',
    deptId: [], // 改为数组类型，用于存储多个部门ID
    gangwei: '',
    password: null,
    password2: null,
    email: null,
    name: null,
  },
  companyNames: [],
  provinces: [],
  cities: [],
  deptList: [],
  chooseDeptList: [], // 选择的业务列表
  businessNames: [], // 部门名称列表，用作业务选择
  deptMap: new Map(), // 部门名称到ID的映射
  companiesMap: new Map(), // 公司名称到ID的映射
  hidePassword1: true,
  hidePassword2: true,
  popShow: false,
  postList: [],
  postNames: [],
  postMap: new Map(),
  userAgreement: false,
  userAgreementShow: false,
  userDeptShow: false,
})

/* 省市区选择器部分 *********************************** begin */
const district = {
  0: [{ label: '北京', value: '110000' }],
  110000: [{ label: '北京', value: '110100' }],
}

const value = ref(['110000', '110100'])

const columns = ref([district[0], district[district[0][0].value]])

const onChangeDistrict = (pickerView, value, columnIndex, resolve) => {
  const item = value[columnIndex]
  if (columnIndex === 0) {
    // 如果已经有城市数据，直接设置
    if (district[item.value]) {
      pickerView.setColumnData(1, district[item.value])
      resolve()
    } else {
      // 否则从服务器获取城市数据
      getRegion(parseInt(item.value))
        .then((res) => {
          if (res.code === 200) {
            district[item.value] = res.data.map((city) => ({
              label: city.name,
              value: city.code.toString(),
            }))
            pickerView.setColumnData(1, district[item.value])
            resolve()
          } else {
            // 如果获取失败，设置空数组
            pickerView.setColumnData(1, [])
            resolve()
          }
        })
        .catch(() => {
          pickerView.setColumnData(1, [])
          resolve()
        })
    }
  } else {
    resolve()
  }
}

// 日期选择处理方法
const onConfirmDistrict = (value) => {
  pageData.form.provinceCode = value.value[0]
  pageData.form.cityCode = value.value[1]

  // 获取省份label
  const provinceItem = district[0].find((item) => item.value === value.value[0])
  if (provinceItem) {
    pageData.form.province = provinceItem.label
  }

  // 获取城市label
  const cityItems = district[value.value[0]]
  if (cityItems) {
    const cityItem = cityItems.find((item) => item.value === value.value[1])
    if (cityItem) {
      pageData.form.city = cityItem.label
    }
  }

  console.log(pageData.form.province + ' ' + pageData.form.city)
  console.log(pageData.form.provinceCode + ' ' + pageData.form.cityCode)

  // 选择省市后自动加载供应商公司列表
  loadSupplierCompanies()
}
/* 省市区选择器部分 *********************************** end */

// 加载供应商公司列表
const loadSupplierCompanies = () => {
  if (pageData.form.provinceCode && pageData.form.cityCode) {
    // 重置公司相关数据
    pageData.form.enterPrice = null
    pageData.companyNames = []
    pageData.companiesMap = new Map()

    // 调用API获取供应商列表
    getSupplierCompanyList({
      provinceCode: parseInt(pageData.form.provinceCode),
      cityCode: parseInt(pageData.form.cityCode),
    })
      .then((res) => {
        if (res.code === 200 && res.data) {
          // 提取公司名称列表
          pageData.companyNames = res.data.map((company) => company.supplierCompanyName)

          // 创建公司名称到ID的映射
          pageData.companiesMap = new Map()
          res.data.forEach((company) => {
            pageData.companiesMap.set(company.supplierCompanyName, company.id)
          })

          console.log('加载供应商公司列表成功', pageData.companyNames)
        } else {
          uni.showToast({
            title: '获取企业列表失败',
            icon: 'none',
          })
        }
      })
      .catch((err) => {
        console.error('获取企业列表失败:', err)
        uni.showToast({
          title: '获取企业列表失败',
          icon: 'none',
        })
      })
  }
}

// 公司选择处理函数
const onCompanySelect = (value) => {
  let companyName = ''
  if (value.value.length === 0 && pageData.companyNames.length > 0) {
    companyName = pageData.companyNames[0]
    pageData.form.enterPrice = companyName
  } else {
    companyName = value.value
    pageData.form.enterPrice = companyName
  }

  // 根据公司名称获取公司ID
  if (pageData.companiesMap && pageData.companiesMap.has(companyName)) {
    pageData.form.companyId = pageData.companiesMap.get(companyName)
    if (pageData.form.companyId) {
      // 传入公司ID加载部门列表
      getDeptList(pageData.form.companyId).then((res) => {
        if (res.code === 200) {
          pageData.deptList = res.data
          // 提取部门名称作为业务列表选项
          pageData.businessNames = res.data.map((dept) => dept.deptName)

          // 创建部门名称到ID的映射
          pageData.deptMap = new Map()
          res.data.forEach((dept) => {
            pageData.deptMap.set(dept.deptName, dept.deptId)
          })

          // 清空之前选择的业务，因为企业变了
          pageData.form.yewu = ''
        } else {
          uni.showToast({
            title: res.message,
            icon: 'none',
          })
        }
      })
    }
  }
}

// 业务选择处理函数
const onBusinessSelect = (value) => {
  const deptName = value.value
  pageData.form.yewu = deptName

  // 根据部门名称获取部门ID
  if (pageData.deptMap && pageData.deptMap.has(deptName)) {
    const deptId = pageData.deptMap.get(deptName)
    // 检查是否已经存在该部门ID，不存在则添加到数组中
    if (!pageData.form.deptId.includes(deptId)) {
      pageData.form.deptId.push(deptId)
    }
  }
}

const handleDeptSelect = () => {
  // 处理部门选择
  pageData.form.deptId = []
  pageData.form.yewu = pageData.chooseDeptList.join(',')
  pageData.chooseDeptList.forEach((deptName) => {
    if (pageData.deptMap.has(deptName)) {
      const deptId = pageData.deptMap.get(deptName)
      // 检查是否已经存在该部门ID，不存在则添加到数组中
      if (!pageData.form.deptId.includes(deptId)) {
        pageData.form.deptId.push(deptId)
      }
    }
  })
  pageData.userDeptShow = false
}
onMounted(() => {
  // 获取岗位列表
  getPostList().then((res) => {
    if (res.code === 200) {
      pageData.postList = res.data
      // 提取岗位名称和ID映射关系
      pageData.postNames = res.data.map((post) => post.postName)
      res.data.forEach((post) => {
        pageData.postMap.set(post.postName, post.postId)
      })
    }
  })

  // 获取省份列表
  getRegion().then((res) => {
    if (res.code === 200) {
      // 更新省份下拉选项
      district[0] = res.data.map((province) => ({
        label: province.name,
        value: province.code.toString(),
      }))

      // 更新columns
      columns.value = [district[0], []]

      // 如果有省份数据，自动加载第一个省份的城市
      if (district[0].length > 0) {
        const firstProvinceCode = district[0][0].value
        getRegion(parseInt(firstProvinceCode)).then((cityRes) => {
          if (cityRes.code === 200) {
            district[firstProvinceCode] = cityRes.data.map((city) => ({
              label: city.name,
              value: city.code.toString(),
            }))
            columns.value = [district[0], district[firstProvinceCode]]
          }
        })
      }
    }
  })
})

// 显示确认对话框
const showConfirmDialog = () => {
  uni.showModal({
    title: '确认同意',
    content:
      '本人已经完整阅读并充分理解《格兰富隐私政策—适用于访客信息》（以下简称"隐私政策"）的内容，同意格兰富（中国）有限公司及其关联方按照隐私政策中的规定收集、处理、分享本人的信息。',
    confirmText: '确认',
    cancelText: '取消',
    success: function (res) {
      if (res.confirm) {
        // 用户点击确认
        pageData.userAgreement = true
        pageData.userAgreementShow = false
      }
      // 用户点击取消，不做任何操作
    },
  })
}

// 返回
const back = () => {
  uni.navigateBack()
}

// 处理注册按钮点击事件
const handleRegister = () => {
  // 表单验证
  if (!validateForm()) {
    return
  }

  // 构建注册参数
  const registerParams = {
    userMobile: pageData.form.phone,
    userPwd: pageData.form.password,
    companyId: pageData.form.companyId,
    releationDeptIds: pageData.form.deptId.length > 0 ? pageData.form.deptId.join(',') : '',
    postId: getPostIdByName(pageData.form.gangwei),
    realName: pageData.form.name,
    email: pageData.form.email,
    sex: pageData.form.sex === '男' ? 1 : 2,
    agreedToTerms: pageData.userAgreement,
  }

  // 显示加载中
  uni.showLoading({
    title: '注册中...',
  })

  // 调用注册API
  register(registerParams).then((res) => {
    uni.hideLoading()
    if (res.code === 200) {
      uni.showToast({
        title: '注册成功，请等待审批！',
        icon: 'success',
        duration: 2000,
      })
      // 注册成功后延迟跳转到登录页
      setTimeout(() => {
        uni.navigateTo({
          url: '/pages/login/login',
        })
      }, 2000)
    } else {
      uni.showToast({
        title: res.message || '注册失败',
        icon: 'none',
      })
    }
  })
}

// 表单验证函数
const validateForm = () => {
  // 验证手机号
  if (!pageData.form.phone) {
    uni.showToast({
      title: '请输入手机号',
      icon: 'none',
    })
    return false
  }

  const phoneReg = /^1[3456789]\d{9}$/
  if (!phoneReg.test(pageData.form.phone)) {
    uni.showToast({
      title: '手机号格式不正确',
      icon: 'none',
    })
    return false
  }

  // 验证密码
  if (!pageData.form.password) {
    uni.showToast({
      title: '请输入密码',
      icon: 'none',
    })
    return false
  }

  // 密码至少8位且包含数字、字母
  const passwordReg = /^(?=.*[A-Za-z])(?=.*\d).{8,}$/
  if (!passwordReg.test(pageData.form.password)) {
    uni.showToast({
      title: '密码至少8位且包含数字、字母',
      icon: 'none',
    })
    return false
  }

  // 验证确认密码
  if (pageData.form.password !== pageData.form.password2) {
    uni.showToast({
      title: '两次密码输入不一致',
      icon: 'none',
    })
    return false
  }

  // 验证姓名
  if (!pageData.form.name) {
    uni.showToast({
      title: '请输入姓名',
      icon: 'none',
    })
    return false
  }

  // 验证邮箱
  if (!pageData.form.email) {
    uni.showToast({
      title: '请输入邮箱',
      icon: 'none',
    })
    return false
  }

  const emailReg = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/
  if (!emailReg.test(pageData.form.email)) {
    uni.showToast({
      title: '邮箱格式不正确',
      icon: 'none',
    })
    return false
  }

  // 验证性别
  if (!pageData.form.sex) {
    uni.showToast({
      title: '请选择性别',
      icon: 'none',
    })
    return false
  }

  // 验证省市
  if (!pageData.form.province || !pageData.form.city) {
    uni.showToast({
      title: '请选择省市',
      icon: 'none',
    })
    return false
  }

  // 验证所属企业（非必填项，可以跳过）

  // 验证岗位
  if (!pageData.form.gangwei) {
    uni.showToast({
      title: '请选择岗位',
      icon: 'none',
    })
    return false
  }

  // 验证用户协议
  if (!pageData.userAgreement) {
    uni.showToast({
      title: '请阅读并同意用户协议',
      icon: 'none',
    })
    return false
  }

  return true
}

// 根据岗位名称获取岗位ID
const getPostIdByName = (postName) => {
  if (!postName || !pageData.postMap) return null
  return pageData.postMap.get(postName)
}
</script>
<style lang="scss">
.a {
  color: #c5c5c5;
  text-decoration: underline;
}
.placeholder-class {
  color: white;
}
.entire {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100vw;
  .agreement-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 680rpx;
    height: 1000rpx;
    margin-top: 70rpx;
    margin-left: 35rpx;
    background-color: #d9ecfb;
    border-radius: 20rpx;
    box-shadow: inset 0rpx 10rpx 30rpx rgb(17, 72, 122, 0.5);
    .agreement-title {
      margin-top: 70rpx;
      font-size: 34rpx;
    }
    .agreement-content {
      display: flex;
      flex-direction: column;
      width: 620rpx;
      height: 720rpx;
      margin-top: 40rpx;
      overflow-y: scroll;
    }
  }
  .agreement-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 230rpx;
    height: 70rpx;
    margin-top: 40rpx;
    margin-bottom: 40rpx;
    color: #fff;
    background-color: #134779;
    border-radius: 15rpx;
  }
  .bg {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -10;
    width: 100vw;
    height: 100vh;
  }
  .title1 {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 50rpx;
    font-size: 50rpx;
    font-weight: 550;
    color: #fff;
  }
  .title2 {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 20rpx;
    color: #fff;
  }
  .input-area {
    width: 680rpx;
    min-height: 800rpx;
    padding-top: 40rpx;
    margin-top: 40rpx;
    margin-left: 35rpx;
    background-color: rgba(27, 91, 147, 0.64);
    border-radius: 20rpx;
    box-shadow: inset 0rpx 0rpx 30rpx rgba(255, 255, 255, 0.22);
    .input-entire {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 600rpx;
      height: 80rpx;
      margin-left: 40rpx;
      color: #fff;
      .left {
        display: flex;
        align-items: center;
        height: 80rpx;
        .must {
          width: 20rpx;
          height: 50rpx;
        }
        .icon {
          width: 40rpx;
        }
        .text {
          width: 450rpx;
          margin-left: 30rpx;
        }
      }
    }
    .btn-register {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 600rpx;
      height: 80rpx;
      margin-top: 40rpx;
      margin-left: 40rpx;
      color: #fff;
      background-color: #134779;
      border-radius: 15rpx;
    }
  }
}
</style>
